<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在线生成</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/myProject.css"/>
	</head>
	<body>
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--公共侧边栏 start-->
		<div class="commonSide">
			<div class="sideTitle">项目圈</div>
			<ul class="sideMenu">
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe611;</span>
						<span>我的项目</span>
					</a>
				</li>
				<li class="active">
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe60e;</span>
						<span>我的材料库</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe610;</span>
						<span>我的收藏</span>
					</a>
				</li>
			</ul>
		</div>
		<!--公共侧边栏 end-->
		
		<!--内容 start-->
		<div class="content">
			<div class="contentTop">
				<a class="contentBack">
					<span class="iconfont">&#xe60a;</span>
					<span class="backText">返回</span>
				</a>
				<span class="contentSever">|</span>
				<div class="contentTitle">我的材料库</div>
				<span class="contentTitleSever">></span>
				<div class="contentSecondTitle">在线生成</div>
				<div class="clear"></div>
			</div>
			
			<!--项目圈内容 start-->
			<div class="materialLibrary">
				<div class="projectBox">

					<div class="stepStatus">
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">基本信息</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">实验数据</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine"></div>	
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">3</div>
								<div class="stepName">特性参数</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				<div class="projectBox">
					<div class="libraryForm">
						<div class="inputGroup">
							<label>实验温度</label>
							<input type="text" 
								   class="input" 
								   :class="{showError:checkParam.temperature}" 
								   v-model="checkParam.temperatureVal" 
							@blur="temperatureCheck(checkParam.temperatureVal,checkParam.temperature)"/>
							<span>°C</span>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>压力</label>
							<input type="text" 
								   class="input" 
								   :class="{showError:checkParam.pressure}" 
								   v-model="checkParam.pressureVal" 
							@blur="pressureCheck(checkParam.pressureVal,checkParam.pressure)"/>
							<span>Pa</span>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>样品面积</label>
							<input type="text"
								   class="input" 
								   :class="{showError:checkParam.measure}" 
								   v-model="checkParam.measureVal" 
							@blur="measureCheck(checkParam.measureVal,checkParam.measure)"/>
							<span>㎡</span>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>样品厚度</label>
							<input type="text"
								   class="input" 
								   :class="{showError:checkParam.thickness}" 
								   v-model="checkParam.thicknessVal" 
							@blur="thicknessCheck(checkParam.thicknessVal,checkParam.thickness)"/>
							<span>m</span>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>填载率</label>
							<input type="text" 
								   class="input" 
								   :class="{showError:checkParam.fill}"
								   v-model="checkParam.fillVal" 
							@blur="fillCheck(checkParam.fillVal,checkParam.fill)"/>
							<span>㎡/m³</span>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>相对温度</label>
							<input type="text" 
								   class="input" 
								   :class="{showError:checkParam.compareTemperature}"
								   v-model="checkParam.compareTemperatureVal" 
							@blur="compareTemperatureCheck(checkParam.compareTemperatureVal,checkParam.compareTemperature)"/>
							<span>%</span>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>唤起次数</label>
							<input type="text"
								   class="input" 
								   :class="{showError:checkParam.times}"
								   v-model="checkParam.timesVal" 
							@blur="timesCheck(checkParam.timesVal,checkParam.times)"/>
							<span>ACH</span>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>测试舱体积</label>
							<input type="text" 
								   class="input" 
								   :class="{showError:checkParam.volume}"
								   v-model="checkParam.volumeVal" 
							@blur="volumeCheck(checkParam.volumeVal,checkParam.volume)"/>
							<span>m³</span>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>涂镀量</label>
							<input type="text" 
								   class="input" 
								   :class="{showError:checkParam.amount}"
								   v-model="checkParam.amountVal" 
							@blur="amountCheck(checkParam.amountVal,checkParam.amount)"/>
							<span>g/㎡</span>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>试验日期</label>
							<template>
							  	<div class="block">
								    <el-date-picker
								      v-model="testDate"
								      type="date"
								      placeholder="选择日期"
								      :picker-options="pickerOptions0">
								    </el-date-picker>
								</div>
							</template>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<label>收样日期</label>
							<template>
								<div class="block">
								    <el-date-picker
								      v-model="receiveDate"
								      type="date"
								      placeholder="选择日期"
								      :picker-options="pickerOptions1">
								    </el-date-picker>
								</div>
							</template>
							<div class="clear"></div>
						</div>
						<div class="dataForm">
							<button class="greenBtn">数据导入</button>
							<button class="whiteBtn">模板下载</button>
							<button class="whiteBtn">计算特性参数</button>
							<button class="whiteBtn">图示</button>
							<ul class="wid100 dataFormContentBox">
								<li class="dataFormTitle">
									<div class="source">污染源</div>
									<div class="time">采样时间(h)</div>
									<div class="concentration">采样浓度(mg/m³)</div>
									<div class="control">操作</div>
									<div class="clear"></div>
								</li>
								<li class="dataFormContent" v-for="(list,index) in sampledData">
									<div class="source"><input type="text" :value="list.source"  v-model="sampledData[index].source"></div>
									<div class="time"><input type="text" :value="list.time" v-model="sampledData[index].time"></div> 
									<div class="concentration">
										<input type="text" 
											   :value="list.concentrationVal"
											   :name="'input' + index"
											   v-model="sampledData[index].concentrationVal"
										@blur="concentrationCheck">
									</div>
									<div class="control"><a href="javascript:void(0);" class="delete">删除</a></div>
									<div class="clear"></div>
								</li>
							</ul>
							<div class="addLine" @click="addLine">
								<a href="javascript:void(0);">
									<i class="el-icon-plus"></i>
									<span>添加一行</span>
								</a>
							</div>
							<div class="wid100 tac mt30">
								<button class="greenLargerBtn" @click="login">下一步</button>
							</div>
						</div>
					</div>
				</div>
			
				
			</div>
			<!--项目圈内容 end-->
		</div>
		<!--内容 end-->
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('min-height',contentMinHeight + 'px');
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			
			//添加和删除控制
			//删除
			$(document).on('click','.delete',function(){
				console.log(1);
				$(this).closest('.dataFormContent').remove();
			});
			
		});
		
		
		//实例化自定义组件库中的FormDataCheck对象;
		var FormDataCheck = new FormDataCheck();
		var list = {};
		
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
		
		var projectCircleIndex = new Vue({
			el:'.materialLibrary',
			data:function(){
				return{
					//试验日期
					testDate:'',
					pickerOptions0: {},
					//收样日期
			        receiveDate:'',
			       	pickerOptions1: {},
			       	checkParam:{
			       		//实验温度
			       		temperatureVal:'',
			       		temperature:'',
			       		//压力测试
			       		pressureVal:'',
			       		pressure:'',
			       		//样品面积
			       		measureVal:'',
			       		measure:'',
			       		//样品厚度
			       		thicknessVal:'',
			       		thickness:'',
			       		//填载率
			       		fillVal:'',
			       		fill:'',
			       		//相对温度
			       		compareTemperatureVal:'',
			       		compareTemperature:'',
			       		//唤起次数
			       		timesVal:'',
			       		times:'',
			       		//测试舱体积
			       		volumeVal:'',
			       		volume:'',
			       		//涂镀量
			       		amountVal:'',
			       		amount:''
			       	},
			       	//采样数据
			       	sampledData:[
			       		{
			       			source:'',
			       			time:'',
			       			concentrationVal:'',
			       			concentration:'',
			       		},
			       	],
				}
			},
			methods:{
				//提交添加一行区域输入框的内容
				login:function(){
					var self = this;
					var sampledData = [];
					var sampledDataChild = {};
					for(var i = 0; i < self.sampledData.length; i++){
						sampledDataChild.Source = self.sampledData[i].source;//每一行污染源输入框的值
						sampledDataChild.Time = self.sampledData[i].time;//每一行采样时间输入框的值
						sampledDataChild.ConcentrationVal = self.sampledData[i].concentrationVal;//每一行采样浓度输入框的值
						sampledData.push[sampledDataChild];
					}
					sampledDataChild = {};
					console.log(this.sampledData);
				},
				//实验温度文本框检测
				temperatureCheck:function(val,param){
					this.checkParam.temperature = FormDataCheck.onlyNumAndDecimalPoint(val,param);
					if(this.checkParam.temperature){
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}
					return this.checkParam.temperature;
				},
				//压力文本框检测
				pressureCheck:function(val,param){
					this.checkParam.pressure = FormDataCheck.onlyNumAndDecimalPoint(val,param);
					if(this.checkParam.pressure){
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}
					return this.checkParam.pressure;
				},
				//样品面积文本框检测
				measureCheck:function(val,param){
					this.checkParam.measure = FormDataCheck.onlyNumAndDecimalPoint(val,param);
					if(this.checkParam.measure){
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}
					return this.checkParam.measure;
				},
				//样品厚度文本框检测
				thicknessCheck:function(val,param){
					this.checkParam.thickness = FormDataCheck.onlyNumAndDecimalPoint(val,param);
					if(this.checkParam.thickness){
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}
					return this.checkParam.thickness;
				},
				//填载率文本框检测
				fillCheck:function(val,param){
					this.checkParam.fill = FormDataCheck.onlyNumAndDecimalPoint(val,param);
					if(this.checkParam.fill){
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}
					return this.checkParam.fill;
				},
				//相对文本框检测
				compareTemperatureCheck:function(val,param){
					this.checkParam.compareTemperature = FormDataCheck.onlyNumAndDecimalPoint(val,param);
					if(this.checkParam.compareTemperature){
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}
					return this.checkParam.compareTemperature;
				},
				//唤起次数文本框检测
				timesCheck:function(val,param){
					this.checkParam.times = FormDataCheck.onlyNumAndDecimalPoint(val,param);
					if(this.checkParam.times){
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}
					return this.checkParam.time;
				},
				//测试舱体积文本框检测
				volumeCheck:function(val,param){
					this.checkParam.volume = FormDataCheck.onlyNumAndDecimalPoint(val,param);
					if(this.checkParam.volume){
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}
					return this.checkParam.volume;
				},
				//涂镀量文本框检测
				amountCheck:function(val,param){
					this.checkParam.amount = FormDataCheck.onlyNumAndDecimalPoint(val,param);
					if(this.checkParam.amount){
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}
					return this.checkParam.amount;
				},
				//采样浓度文本框检测
				concentrationCheck:function(event){
					console.log(event.target.value); 
					var val = event.target.value;
					var name = event.target.getAttribute('name');
					var result = FormDataCheck.onlyNumAndDecimalPoint(val,name);
					if(result){
						event.target.classList.add('showError');
						this.$message.error('数据中只能填写数字和小数点,并且必须以数字开头和以数字结尾！');
					}else{
						event.target.classList.remove('showError');
					}
				},
				//添加一行
				addLine:function(){
					list.source = '';
					list.time = '';
					list.concentrationVal = '';
					list.concentration = '';
					this.sampledData.push(list);
					list = {};
				},
				
			}
		});
	</script>
</html>
